<template>
  <view
      class="recommend-scenic-spot-item"
      :style="{ background: props.bgc }"
      @click="handleNavPage"
  >
<!--    <view class="left-container">
&lt;!&ndash;      <image class="poi-img" mode="widthFix" ></image>&ndash;&gt;
    </view>-->
<!--    <wd-img :width="104" :height="104" radius="5" mode="scaleToFill" :src="recommendScenicSpotItem.blImageUrl" />-->
    <image
        :src="recommendScenicSpotItem.headImageUrl"
        style="min-width: 108px; max-height: 108px;max-height: 108px;max-width: 108px;border-radius: 5px; object-fit: cover;"
    ></image>
    <view class="right-container">
      <view class="scenic-spot-info-container">
        <view class="top-container">
          <view class="scenic-spot-name-level-container">
            <view class="scenic-spot-name">{{recommendScenicSpotItem.name}}</view>
            <view class="scenic-spot-level">5A</view>
          </view>
          <view class="scenic-spot-description">
            {{recommendScenicSpotItem.address}}
          </view>
        </view>
        <view class="distance-sale-price-container">
          <view class="distance">距市中心 {{distanceTransform(recommendScenicSpotItem.distance)}} km</view>
          <view class="sale-price" v-if="recommendScenicSpotItem.price">
            <text class="unit">￥</text>
            {{recommendScenicSpotItem.price}}
            <text class="unit">起</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {useMixin} from "@/hook/useMixin";
  const {distanceTransform} = useMixin();

  const props = defineProps({
    bgc: {
      default: "#eef0df",
      type: String
    },
    recommendScenicSpotItem: {
      default: {},
      type: Object
    }
  });

  const handleNavPage = () => {
    let {id,name} = props.recommendScenicSpotItem;
    uni.navigateTo({
      url: `/ticketSubPack/pages/scenicSpotDetail/index?id=${id}&name=${name}`
    })
  };
</script>

<style lang="scss" scoped>
  .recommend-scenic-spot-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-radius: 10rpx;
    padding: 20.8rpx 20rpx 20rpx 13rpx;
    overflow: hidden;
    margin-bottom: 27rpx;
    background-color: #eef0df;
    /*.left-container {
      border-radius: 10.5rpx;
      overflow: hidden;
      .poi-img {
        width: 104px;
        height: 104px;
        background-size: contain;
      }
    }*/
    .right-container {
      flex: 1;
      padding-left: 20rpx;
      height: 209rpx;
      .scenic-spot-info-container {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
        .top-container {
          .scenic-spot-name-level-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .scenic-spot-name {
              width: 856%;
              font-size: 33rpx;
              font-weight: bold;
              overflow: hidden;
              white-space: nowrap;
              text-overflow:ellipsis;
            }
            .scenic-spot-level {
              font-size: 22rpx;
              border-radius: 7rpx;
              padding: 2rpx 10rpx;
              color: #FDFFEB;
              background-color: #508963;
            }
            -webkit-box-orient: vertical;
          }
          .scenic-spot-description {
            margin-top: 22rpx;
            font-size: 25rpx;
            height: 70rpx;
            color: #2B2B24;
            overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
          }
        }
        .distance-sale-price-container {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          .distance {
            font-size: 22rpx;
            color: #777777;
          }
          .sale-price {
            font-size: 33rpx;
            font-weight: bold;
            color: #AA5414;
            .unit {
              font-size: 25rpx;
            }
          }
        }
      }
    }
  }
</style>
